<template>
    <div class="my-account">
        <!-- 滚动 -->
        <!-- <scroller> -->
            <!-- 上拉更新 -->
            <!-- <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
                <text class="indicator-text">刷新中...</text>
                <loading-indicator class="indicator"></loading-indicator>
            </refresh>  -->
            <!-- 导航栏 -->
          
                
            <wxc-minibar background-color="#E65959" text-color="#fff"  :use-default-return="false" @wxcMinibarRightButtonClicked="router">
                <image src="" slot="left"></image>
                <text style="font-size:36px;color:#fff; font-family: PingFangSC-Medium;" slot="middle">我的</text>
            </wxc-minibar>
            
            <div class="my-account-header-cont" >
                <image class="my-account-header-img" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/my-bg1.png"></image>
                <div class="my-account-header-card"  @click="setInfoDetails">
                    <div class="my-account-pic">
                        <image class="my-account-header" :src=' personalDetails.avatar || "http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/header-default.png"'></image>
                    </div>
                    <div class="my-account-cart-img" >
                        <text class="my-account-header-name">{{ personalDetails.nickName || nameDefault[parseInt(Math.random() * nameDefault.length)] }}</text>
                    </div>
                     <div class="my-account-cart-img" >
                         <image class="my-account-pathW"  src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/pathW.png"></image>
                    </div>
                </div>
            </div>
            <div class="my-account-header-card-list-cont" @click="linkMyWallet">
                 <div class="my-account-header-card-list">
                        <text class="cart-moneny">{{ capitalAvailable | fixed }}</text>
                         <text class="cart-name">账户金额</text>
                         <div class="line"></div>
                 </div>
                 <div class="my-account-header-card-list"  @click="goCoupon">
                     <div class="cart-money-txtwrap">
                           <text class="cart-moneny">{{ couponNum }}</text>
                           <text class="cart-num">张</text>
                     </div>
                      
                         <text class="cart-name">优惠券</text>
                         </div>  
             </div>          
            <div class="my-account-content-list">
                <div class="discover_item1 border-top">
                    <div class="discover_content" @click="gomywallet()">
                        <div class="flex_lf">
                            <image class="discover_item_icon" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/my-icon1.png"></image>
                            <text class="discover_item_title">我的钱包</text>
                        </div>
                        <div class="flex_rt">
                            <!-- <text class="discover_item_detail">经常活动回馈新老用户</text> -->
                            <text class="discover_item_arrow">&#xe61c;</text>
                        </div>
                    </div> 
                </div>
                <div class="discover_item1 border-bot">
                    <div class="discover_content" @click="gobatrecord()">
                        <div class="flex_lf">
                           <image class="discover_item_icon" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/my-icon2.png"></image>
                            <text class="discover_item_title">我的彩票</text>
                        </div>
                        <div class="flex_rt">
                            <text class="discover_item_arrow">&#xe61c;</text>
                        </div>
                    </div>  
                </div>
                <div class="activity-home">
                    <image class="activity-img" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/yunying-bg.png"></image>
                </div>
                   <div class="discover_item1 border-top">
                    <div class="discover_content">
                        <div class="flex_lf">
                            <image class="discover_item_icon" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/my-icon6.png"></image>
                            <text class="discover_item_title">代理赚钱</text>
                        </div>
                        <div class="flex_rt">
                            <text class="discover_item_detail"></text>
                            <text class="discover_item_arrow">&#xe61c;</text>
                        </div>
                    </div> 
                </div> 

                <div class="discover_item1">
                    <div class="discover_content" @click="goMesage()">
                        <div class="flex_lf">
                            <image class="discover_item_icon" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/my-icon3.png"></image>
                            <text class="discover_item_title">意见反馈</text>
                        </div>
                        <div class="flex_rt">
                            <text class="discover_item_detail"></text>
                            <text class="discover_item_arrow">&#xe61c;</text>
                        </div>
                    </div> 
                </div> 


                <div class="discover_item1">
                    <div class="discover_content" @click="toastMsg('暂未开放，敬请期待')">
                        <div class="flex_lf">
                            <image class="discover_item_icon" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/my-icon4.png"></image>
                            <text class="discover_item_title">客服热线</text>
                        </div>
                        <div class="flex_rt">
                            <text class="discover_item_detail"></text>
                            <text class="discover_item_arrow">&#xe61c;</text>
                        </div>
                    </div> 
                </div> 

                <div class="discover_item1 border-bot">
                    <div class="discover_content"  @click="router()">
                        <div class="flex_lf">
                            <image class="discover_item_icon" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/my-icon5.png"></image>
                            <text class="discover_item_title">设置</text>
                        </div>
                        <div class="flex_rt">
                            <text class="discover_item_detail"></text>
                            <text class="discover_item_arrow">&#xe61c;</text>
                        </div>
                    </div> 
                </div>
            </div>
        <!-- </scroller>     -->
    </div>
</template>
<script>
import { WxcMinibar } from "weex-ui";
import { postResponsesToken } from '@/api'
import { getBaseUrl, serialize }  from "@/utils/index.js"
import WxcLoadingsp from "@/components/modules/loading";

const navigator = weex.requireModule('navigator')
const storage = weex.requireModule('storage')
const modal = weex.requireModule('modal')
let myAccount = new BroadcastChannel('app')

export default {
    props: ["contentStyle"],
    data() {
        return {
            data: 0,
            setStyle: false,
            header:'',
            capitalAvailable:'0.00', // 账户可提现金额
            couponNum:0, //优惠券张数
            integral:0, //积分
            refreshing:false,
            personalDetails:{
                avatar:"",
                nickName:''
            },
            baseURL:'',
            nameDefault:['Zachary','Isaac', 'Lucas','Jackson', 'Jessica']
        };
    },

    components: {
        WxcMinibar,
        WxcLoadingsp
    },
    
    filters:{
        fixed(value) {
            return String(value).indexOf('.') ? Number(value).toFixed(2) : value+'.00'
        }
    },

    methods: {
        //toast弹窗
        toastMsg(msg){
            modal.toast({
                message: msg,
                duration: 1
            })
        },
        router(){
            navigator.push({
                'url': this.baseURL + 'views/my-account/set-confirm.js',
                'animated': 'true'
            })
        },
        gomywallet(){
            navigator.push({
                'url': this.baseURL + 'views/mywallet/index.js',
                'animated': 'true'
            })
        },
        gobatrecord(){

            navigator.push({
                'url': this.baseURL + 'views/bat/batlist.js',
                'animated': 'true'
            })
        },
        goCoupon(){
            navigator.push({
                'url': this.baseURL + 'views/couponlist/couponlist.js',
                'animated': 'true'
            })
        },
        goMesage(){
             navigator.push({
                'url': this.baseURL + 'views/feedback/feedback.js',
                'animated': 'true'
            })
        },
      
        // 查询用户信息
        async getUserInfo() {
            let data = await postResponsesToken('account/user/userInfo')
            if( data.code === 0) {
                this.setItemDate('personalDetails', data.data).then( value => {
                    !!value && this.getPersonalDetails()
                })
            }
        },

        // 下拉刷新
        onrefresh(event) {
            this.refreshing = true
            // 资金信息
            this.getUserInfo()

            setTimeout(() => {
                this.refreshing = false;
            }, 2000);
        },
        
        // 获取缓存
        getItem (name) {
            return new Promise((resolve, reject)=>{
                storage.getItem(name, event => {
                    if (event.result === "success") {
                        resolve(event.data);
                    } else {
                        reject("获取数据失败");
                    }
                })
            })
        },

        
        // 缓存数据
		setItemDate(name, data) {
			return new Promise((resolve, rejects) => {
				storage.setItem(name, JSON.stringify(data), event => {
					if (event.result === "success") {
						resolve(true)
					} else {
						rejects("获取缓存key失败!")
					}
				})
			})
        },
        
        // 进入设置个人信息
        setInfoDetails() {
            let param = Object.assign( this.personalDetails, { type:'myInfo'})
            navigator.push({
                'url': this.baseURL + 'views/my-account/my-info.js',
                'animated': 'true'
            })	
        },

        // 进入资金信息
        linkMyWallet() {
            navigator.push({
                'url': this.baseURL + 'views/mywallet/index.js',
                'animated': 'true'
            })
        },

        // 邀请好友
        // jumpToInvite(){
        //     navigator.push({
        //         'url': this.baseURL + 'views/invite/invite.js',
        //         'animated': 'true'
        //     })
        // },

        // 关于我们
        jumpToAboutUs() {
            navigator.push({
                'url': this.baseURL + 'views/about-us/about-us.js',
                'animated': 'true'
            })
        },

        // 获取个人信息
        getPersonalDetails() {
            this.getItem('personalDetails').then( (value) => {
                // 昵称， 头像，总资金, 积分,优惠券可使用张数
                let { capitalAvailable, capitalScore,couponNum } = JSON.parse(value)
                
                this.capitalAvailable = capitalAvailable || '0.00'
                this.integral = capitalScore || '0.00'
                this.couponNum=couponNum || '0';
                this.personalDetails = JSON.parse(value)
            })
        }
    },

    beforeCreate() {
        var domModule = weex.requireModule('dom');
        
        domModule.addRule('fontFace', {
            'fontFamily': "iconfttf",
            'src': "url('http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/iconfont.ttf')"
        });
        domModule.addRule('fontFace', {
            'fontFamily': "iconwoff",
            'src': "url('http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/iconfont.woff')"
        });      
    },
    
    mounted() {
        // 注释加载用户信息
        this.getUserInfo();
        // 获取路径
        this.baseURL = getBaseUrl(weex.config.bundleUrl, true)
    },

    created() {
        myAccount.onmessage =  (event)=> {
           this.getPersonalDetails()
        }
    }
};
</script>

<style scoped>
.loading {
  width: 750;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.activity-img{
    width:686px;
    height:140px;
}
 .refresh {
  width: 750;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
    
}
.indicator-text {
    color: #888888;
    font-size: 28px;
    text-align: center;
    margin-top:16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.indicator {
    margin-top: 16px;
    height: 40px;
    width: 40px;
    color: #ccc;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.my-account-header-card-list-cont {
   
    flex-direction: row;
    height:130px;
    background-color: #fff;
    margin-bottom:24px;
    border-bottom-width: 1px;
    border-bottom-color: #DCDCDC;
    border-bottom-style:solid;
}

.scroller-div {
    width:750px;
    display: flex;
    flex:1
}

.line {
    background-color: #D1D1D1;
    width:2px;
    height:64px;
    position: absolute;
    top:26px;
    right:0;
}

.vip-card {
    height: 48px;
    padding-left:30px;
    padding-right: 30px;
    width:120px;
    background-color: #DCAC6E;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 48px;
    font-family: PingFangSC-Medium;
    font-size: 24px;
    color: #FFFFFF;
}

.my-account-cart-img {
  margin-left:35px;
    
}

.header_item_icon {
    font-family: iconfttf;
    font-size: 32px;
    color:#fff;
}
.my-account {
  width: 750px;
  
}

.my-account-header-img {
 width:750px;
 height:270px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.my-account-header-cont {
    position: relative;
    width: 750px;
    height:270px;
    justify-content: center;
    margin-top: -1px;
}

.my-account-header-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 72px;
}

.my-account-header {
  width: 118px;
  height: 118px;
  border-radius:50px;
  
}

.my-account-pic {
  width: 118px;
  height: 118px;
 
}

.my-account-header-name {
    font-size: 32px;
    color: #ffffff;
    font-family: PingFangSC-Medium;
  
}

.my-account-header-card {
    width:715px;
    flex-direction: row;
    margin-left:35px;
    height:120px;
    align-items: center;
    /* margin-top:44px; */
}
.my-account-pathW{
    width:19px;
    height:30px;
}
.my-account-header-card-list {
  flex: 1;
  height:130px;
  display: flex;
  align-items: center;
  justify-content:center;
  position: relative;
}

.cart-moneny {
  font-size: 44px;
  color: #333;
  font-weight: bold;
}
.cart-money-txtwrap{
    flex-direction: row;
}
.cart-num{
    font-size:22px;
    color:#333;
    padding-top:16px;
   
}
.cart-name {
  font-size: 24px;
  color:#999999;
}

.my-account-header-card-img {
  width: 686px;
  height: 200px;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
}

.discover_item {
  height: 96px;
  margin: 24px 0;
}
.discover_content {
  height: 96px;
  align-items: center;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.discover_item1 {
  height: 96px;
}
.activity-home{
    width:750px;
    height:200px;
    justify-content: center;
    align-items: center;
}
.flex_lf {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex: 40%;
  height: 96px;
  margin-left: 32px;
}
.flex_rt {
  justify-content: flex-end;
  text-align: right;
  align-items: center;
  display: flex;
  flex-direction: row;
  flex: 60%;
  margin-right: 32px;
}


.discover_item_icon {
  font-family: iconfttf;
  font-size: 32px;
  color: #e70d0d;
  display: flex;
  align-items: center;
}

.discover_item_title {
  margin-left: 26px;
  font-family: PingFangSC-Medium;
  font-size: 32px;
  color: #333333;
  display: flex;
  align-items: center;
}
.discover_item_detail {
  font-family: Helvetica;
  font-size: 24px;
  color: #999999;
  margin-right: 20px;
}
.image {
  width: 35px;
  height: 35px;
}

.discover_item_icon {
width:44px;
height:44px;
}

.discover_item_arrow {
  font-family: iconfttf;
  font-size: 26px;
  color: #d8d8d8;
}
.border-bot{
    border-bottom-color: #DCDCDC;
    border-bottom-style: solid;
    border-bottom-width:1px;
}
.border-top{
    border-top-color: #DCDCDC;
    border-top-style: solid;
    border-top-width:1px;
}
</style>
